<template>
<div class="news">
  <div class="news_content" >
    <h1>{{newsTitle}}</h1>
    <p>{{newsContent}}</p>
  </div>
  <div class="input">
    <el-input
        type="textarea"
        :rows="2"
        autosize
        placeholder="请输入回复"
        v-model="reply_content">
    </el-input>
    <el-input v-model="reply_nickname" style="width:20%"placeholder="请输入回复，默认为匿名"></el-input>
    <el-button type="primary" plain style="margin-top: 5px; margin-left: 30px" @click="reply">回复</el-button>
  </div>
  <div class="news_reply" v-show="load">
  <p>回复列表</p>
    <el-divider class="divider" id="reply_top"></el-divider>
    <comment_data
               :id="item.id"
               :time="item.time"
               :nickname="item.nickname"
               :content="item.reply_content"
               v-for="(item,index)  in replyList">
    </comment_data>
  <br>
    <br><br><br><br><br><br><br>
  </div>
</div>
</template>

<script>
/*import commentData from "../../components/commentData";
import createComment from "../../components/commentData";*/
import comment_data from "../../components/comment_data";
/*const replyItem = new (Vue.extend(comment_data))(
    {props:
      [
          'id','time','nickname','content'
      ]
    });*/
import Vue from "vue";
export default {

  name: "News",
  components: {
    comment_data,

  },
  mounted() {
    //向后端请求数据,这里假装使用了axios
    /*axios({
      method: 'post',
      url: '/question/get_question_detail?id='+this.$route.query.problemIndex.toString(),
    })
        .then(res => {
          //获取数据
          if(res.data.errcode===0)
          {
            this.inputExample=[res.data.inputExample];
            console.log(res.data);
          }
          else if(res.data.errcode===-2)
          {
            Message.error("查询失败");
          }
          else {
            Message.error("未知错误");
          }
        })
        .catch(function (error) {
          this.$message.error(error);
        })*/
    this.load=false;
    this.newsTitle='EA《战地 2042》将支持英伟达 DLSS/Reflex 技术';
    this.newsContent='  据外媒 PC Gamer 报道，EA 和开发商 DICE 宣布与英伟达合作' +
    '，其即将推出的《战地 2042》将支持英伟达 DLSS 技术和 Reflex 技术。此外，EA 还宣布了《战地 2042》的其' +
    '他合作伙伴，包括微软 Xbox、罗技、西数以及北极星，《战地 2042》将支持' +
    '罗技的 Lightsync LED 控制技术，并在游戏中为玩家带来了北极星越野车。';
    //评论初始化
    this.commentData=[
      {
        id:'1',
        time:'',
        reply:'',
        content:'',
        indent:'',
        parentId:'',
        nickname:'',
      }
    ],


    this.load=true;
  },
  computed:{
        listLen:function (){
          if (this.replyList===[])
          return 0;
          else {
            return ((this.replyList).length);
          }

    }
  },
  data()
  {
    return{
      commentData:[],
      newsTitle:'',
      newsContent:'',
      load:'true',
      reply_content:'',
      reply_nickname:'',
      replyList:[],

    }
  },

  methods:
      {
        reply(){
          let date = new Date();
          let dateString = date.getFullYear() + "/" +
              (date.getMonth() + 1) + "/" + date.getDate() +
              "  " + date.getHours() + ":" + date.getMinutes() +
              ":" + date.getSeconds();
          if(this.reply_nickname==='')
          {
            this.reply_nickname='匿名';
          }
          /*axios.post{}*/
          console.log(this.listLen);
          this.replyList.push(
              {
                id: 1,
                nickname:this.reply_nickname,
                content:this.reply_content,
                replyList:[],
                time:dateString,
                indent:0,
                parentId:-1,
              }
          )
          //向后端传输数据，如果数据库写入成功，才进行下面的步骤,
/*          var para=document.getElementById("#reply_top");
          var child=document.createElement("p");
          para.appendChild(child);*/
         /* let replyItem = new (Vue.extend(comment_data))(
              {propsData:
                {
                  id: "1",time:dateString,
                  nickname:this.nickname,
                  content:this.reply_content
                }
              }).$mount('#reply_top');
          */
        },
      }
}
</script>

<style scoped>
.news
{
  margin-right: 5%;
  margin-left: 5%;
  text-align:left;
}

.news_reply
{
  margin-top: 25px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-align:left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

</style>